<script setup>
  // import {ref,reactive,onUnmounted,computed,watchEffect} from "vue"
//   const state=reactive({
//     count:0
//   })
//   const count1=ref(0)
//   const addCount=()=>{
//     count1.value++
//   }
//   const how=computed(()=>{
//     return count1.value;
//   })
//   watchEffect(()=>{ 
//     console.log(count1.value);
//   })
//   const timer=setInterval(()=>{
//     state.count++
//   },1000)

//   onUnmounted(() => {
//     clearInterval(timer)
//   })
//  const name=ref("")


//vue 原型绑定
// import { getCurrentInstance, onMounted } from "vue"

// const { appContext } = getCurrentInstance()
// onMounted(() => {
//   appContext.config.globalProperties.$http.get("https://unidemo.dcloud.net.cn/api/news")
//     .then(res => {
//       console.log(res);
//     })
// })

//provide  inject
// import {inject,onMounted} from "vue"
// const $http = inject("$http")
// onMounted(() => {
//   $http.get("https://unidemo.dcloud.net.cn/api/news")
//     .then(res => {
//       console.log(res);
//     })
// })

import { onMounted } from "vue"
import { getList } from "./http/goods/index"
import { ElButton,ElCard } from 'element-plus'
import {ref} from "vue"
import card from "../src/components/card.vue"

onMounted(() => {
  getListFn();
  get2();
  get3();
})

const getListFn = async () => {
  const res = await getList();
  console.log(res)
}
const get2 = () => {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://unidemo.dcloud.net.cn/api/news", true);
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.status == 200 && xhr.readyState == 4) {
      console.log("ajax", xhr.responseText)
    }
  }
}

const get3 = () => {
  fetch("https://unidemo.dcloud.net.cn/api/news")
    .then(
      res => res.json()
    )
    .then(
      res => console.log("fetch", res)
    )
}
const open=ref(false)
const openFn=()=>{
  open.value=false
}
const open1=()=>{
  open.value = true
}
const c="red"
</script>

<template>
 <div class="app">
  <!-- <el-card></el-card>
  <el-button type="success">I am ElButton</el-button> -->
  <p class="my">myshijie</p>
  <button @click="open1">Open Modal</button>
  <div>
    <Teleport to="body">
      <card v-show="open" @openFn="openFn"></card>
    </Teleport>
  </div>

  <!-- <input type="text" v-model="name">
  {{name}}
  <div>{{state.count}}</div>
  <input type="text" v-model="count1">
  <div>{{0}}----{{how}}</div>
  <button @click="addCount"></button> -->
 </div>
</template>

<style>
  .my{
    color:v-bind(c);
  }
</style>
